<template>
	<div>
		<template>
			<!-- 搜索条件 -->
			<div class="params">
				<el-form
					ref="ruleForm"
					:model="queryData"
					:rules="rules"
					label-width="110px"
					:inline="true"
				>
					<div>
						<el-form-item label="任务标题:" prop="betTitle">
							<el-input
								v-model="queryData.betTitle"
								size="mini"
								placeholder="请输入"
								clearable
								:disabled="!editVisibleChlLid"
								style="width: 180px"
								maxlength="6"
							></el-input>
						</el-form-item>
						<el-form-item
							label="任务开关:"
							label-width="110px"
							prop="betSwitch"
						>
							<el-switch
								v-model="queryData.betSwitch"
								:disabled="!editVisibleChlLid"
								active-text="开"
								inactive-text="关"
							></el-switch>
						</el-form-item>
						<el-form-item
							label="返利开始时间:"
							label-width="120px"
							prop="betCountType"
						>
							<el-select
								v-model="queryData.betCountType"
								size="mini"
								placeholder="请选择"
								clearable
								collapse-tags
								:disabled="!editVisibleChlLid"
								style="width: 160px"
							>
								<el-option
									v-for="item in activeObj"
									:key="item.id"
									:label="item.label"
									:value="item.id"
								></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="返利比例:" prop="betRewardRate">
							<el-input
								v-model="queryData.betRewardRate"
								size="mini"
								placeholder="请输入"
								clearable
								:disabled="!editVisibleChlLid"
								maxlength="9"
								style="width: 160px"
							>
								<span slot="append">%</span>
							</el-input>
						</el-form-item>
						<el-form-item label="返利有效期:" prop="betRewardDay">
							<el-input
								v-model="queryData.betRewardDay"
								size="mini"
								placeholder="请输入"
								clearable
								:disabled="!editVisibleChlLid"
								maxlength="9"
								style="width: 180px"
							>
								<span slot="append">天</span>
							</el-input>
						</el-form-item>
					</div>
					<div>
						<el-form-item
							label="最低返利金额:"
							label-width="120"
							prop="betRewardMin"
						>
							<el-input
								v-model="queryData.betRewardMin"
								size="mini"
								placeholder="请输入"
								clearable
								:maxlength="9"
								:disabled="!editVisibleChlLid"
								style="width: 180px"
							>
								<span slot="append">元</span>
							</el-input>
						</el-form-item>
						<el-form-item
							label="单个好友最高返利金额:"
							label-width="170"
							prop="betRewardMax"
						>
							<el-input
								v-model="queryData.betRewardMax"
								size="mini"
								placeholder="请输入"
								clearable
								:disabled="!editVisibleChlLid"
								:maxlength="9"
								style="width: 180px"
							>
								<span slot="append">元</span>
							</el-input>
						</el-form-item>
					</div>
					<div>
						<el-form-item
							label="红利发放方式:"
							label-width="120px"
							prop="betRewardSendType"
						>
							<el-select
								v-model="queryData.betRewardSendType"
								size="mini"
								placeholder="请选择"
								:disabled="!editVisibleChlLid"
								style="width: 180px"
							>
								<el-option
									v-for="item in paymentMethodObj"
									:key="item.id"
									:label="item.label"
									:value="item.id"
								></el-option>
							</el-select>
						</el-form-item>
						<el-form-item
							label="红利审核:"
							prop="betRewardExamineFlag"
						>
							<el-select
								v-model="queryData.betRewardExamineFlag"
								size="mini"
								placeholder="请选择"
								:disabled="!editVisibleChlLid"
								collapse-tags
								style="width: 175px"
							>
								<el-option label="是" :value="1"></el-option>
								<el-option label="否" :value="0"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item
							label="发放位置:"
							prop="betRewardSendPosition"
						>
							<el-select
								v-model="queryData.betRewardSendPosition"
								size="mini"
								placeholder="请选择"
								:disabled="!editVisibleChlLid"
								collapse-tags
								style="width: 175px"
							>
								<el-option
									label="现金钱包"
									:value="1"
								></el-option>
								<el-option
									label="红利中心"
									:value="2"
								></el-option>
							</el-select>
						</el-form-item>
						<el-form-item
							v-if="queryData.betRewardSendPosition === 2"
							label="领取条件:"
							prop="betRewardReceiveType"
						>
							<el-select
								v-model="queryData.betRewardReceiveType"
								size="mini"
								placeholder="请选择"
								:disabled="!editVisibleChlLid"
								collapse-tags
								style="width: 175px"
							>
								<el-option
									label="无条件"
									:value="1"
								></el-option>
								<!-- <el-option label="绑定手机号和银行卡" :value="2"></el-option> -->
							</el-select>
						</el-form-item>
					</div>
				</el-form>
			</div>
		</template>
	</div>
</template>

<script>
import list from '@/mixins/list'

export default {
	mixins: [list],
	props: {
		editVisible: {
			type: Boolean,
			default: () => false
		}
	},
	data() {
		return {
			editVisibleChlLid: false,
			activeObj: [
				{ label: '注册时间开始计算', id: 1 },
				{ label: '首存时间开始计算', id: 2 }
			],
			paymentMethodObj: [{ label: '系统发放', id: 1 }],
			queryData: {
				betTitle: '',
				TaskForm: '',
				betRewardRate: '',
				betRewardSendPosition: undefined,
				betRewardExamineFlag: 1,
				betRewardReceiveType: undefined,
				betRewardSendType: undefined,
				betRewardDay: '',
				betCountType: undefined,
				betRewardMin: '',
				betRewardMax: '',
				BonusMethod: '',
				depositMethod: '',
				betSwitch: undefined
			}
		}
	},
	computed: {
		rules() {
			const reg = /^(([0-9]+)|([0-9]+\.[0-9]{0,2}))$/
			const validateRewardRate = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入'))
				} else if (!reg.test(value) && value) {
					callback(new Error(`请输入两位小数的正数!`))
				} else if (value && +value === 0) {
					// setTimeout(() => {
					callback(new Error(`不能为0!`))
					// }, 1500)
				} else {
					callback()
				}
			}
			const reg1 = /^(([0-9]+))$/
			const validateBetRewardDay = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入'))
				} else if (!reg1.test(value) && value) {
					callback(new Error(`请输入正整数!`))
				} else if (value && +value === 0) {
					// setTimeout(() => {
					callback(new Error(`不能为0!`))
					// }, 1500)
				} else {
					callback()
				}
			}
			return {
				activeSwitch: [
					{ required: true, message: '', trigger: 'blur' }
				],
				activeName: [
					{ required: true, message: '请输入', trigger: 'blur' }
				],
				activeTitle: [
					{ required: true, message: '请输入', trigger: 'blur' }
				],
				activeObject: [
					{ required: true, message: '请输入', trigger: 'blur' }
				],
				radio: [{ required: true, message: '请输入', trigger: 'blur' }],
				showTime: [
					{ required: true, message: '请输入', trigger: 'blur' }
				],
				activeTime: [
					{ required: true, message: '请输入', trigger: 'blur' }
				],
				ip: [{ required: true, message: '请输入', trigger: 'blur' }],
				equipment: [
					{ required: true, message: '请输入', trigger: 'blur' }
				],
				inviteRadio: [
					{ required: true, message: '请输入', trigger: 'blur' }
				],
				intervalTime: [
					{ required: true, message: '请输入', trigger: 'blur' }
				],
				betRewardSendType: [
					{ required: true, message: '请输入', trigger: 'blur' }
				],
				betTitle: [
					{ required: true, message: '请输入', trigger: 'blur' }
				],
				betRewardMin: [
					{
						required: true,
						validator: validateRewardRate,
						trigger: ['blur', 'change']
					}
				],
				betRewardMax: [
					{
						required: true,
						validator: validateRewardRate,
						trigger: ['blur', 'change']
					}
				],
				betRewardDay: [
					{
						required: true,
						validator: validateBetRewardDay,
						trigger: ['blur', 'change']
					}
				],
				betCountType: [
					{ required: true, message: '请输入', trigger: 'blur' }
				],
				betRewardRate: [
					{
						required: true,
						validator: validateRewardRate,
						trigger: ['blur', 'change']
					}
				],
				betRewardExamineFlag: [
					{ required: true, message: '请输入', trigger: 'blur' }
				],
				betRewardSendPosition: [
					{ required: true, message: '请输入', trigger: 'blur' }
				],
				betRewardReceiveType: [
					{ required: true, message: '请输入', trigger: 'blur' }
				]
			}
		}
	},
	watch: {
		// 规则配置的圆点检测
		queryData: {
			handler(el) {
				Object.keys(el).forEach((item) => {
					this.$nextTick(() => {
						this.$emit('betting')
					})
				})
			},
			deep: true
			// immediate: true
		},
		editVisible: {
			handler(val) {
				this.$nextTick(() => {
					this.editVisibleChlLid = val
				})
			},
			deep: true,
			immediate: true
		}
	},

	methods: {}
}
</script>

<style lang="scss" scoped>
.btn-add {
	width: 60px;
	height: 25px;
	line-height: 25px;
	span {
		display: flex;
		justify-content: center;
		background: #00a7f0;
		align-items: center;
		color: #ffff;
		font-size: 14px;
		cursor: pointer;
	}
}
.form-item ::v-deep .el-form-item__content {
	height: 30px;
	line-height: 30px;
}
::v-deep .el-table__row .el-form-item {
	margin-bottom: 15px;
}
//input-number 位置
::v-deep .el-form-item__content .el-input-group {
	vertical-align: baseline;
}
</style>
